<template>
    <el-card class="template-card" :body-style="{ padding: '0' }">
        <!-- 缩略图 -->
        <div class="thumbnail" @click="handleClick">
            <el-image 
                :src="template.thumbnail" 
                :alt="template.name"
                fit="cover"
                loading="lazy"
            >
                <template #error>
                    <div class="image-error">
                        <el-icon><Picture /></el-icon>
                    </div>
                </template>
            </el-image>
        </div>

        <!-- 卡片内容 -->
        <div class="card-content">
            <h3 class="title">{{ template.name }}</h3>
            <p class="description">{{ template.description }}</p>
            
            <!-- 标签 -->
            <div class="tags">
                <el-tag size="small" type="info">{{ template.category }}</el-tag>
                <el-tag 
                    v-for="tag in template.tags.slice(0, 2)" 
                    :key="tag"
                    size="small"
                    effect="plain"
                >
                    {{ tag }}
                </el-tag>
                <el-tag 
                    v-if="template.tags.length > 2" 
                    size="small"
                    effect="plain"
                >
                    +{{ template.tags.length - 2 }}
                </el-tag>
            </div>

            <!-- 统计信息 -->
            <div class="stats">
                <span class="stat-item">
                    <el-icon><View /></el-icon>
                    {{ template.views }}
                </span>
                <span class="stat-item">
                    <el-icon><Star /></el-icon>
                    {{ template.likes }}
                </span>
            </div>

            <!-- 操作按钮 -->
            <div class="actions">
                <el-button type="primary" @click="handleGenerate">
                    一键生成
                </el-button>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { Picture, View, Star } from '@element-plus/icons-vue';
import type { WorkflowTemplate } from '@/types/workflow-template';

const props = defineProps<{
    template: WorkflowTemplate;
}>();

const emit = defineEmits<{
    (e: 'click', template: WorkflowTemplate): void;
}>();

function handleClick() {
    emit('click', props.template);
}

function handleGenerate(event: Event) {
    event.stopPropagation();
    emit('click', props.template);
}
</script>

<style scoped>
.template-card {
    cursor: pointer;
    transition: transform 0.2s;
}

.template-card:hover {
    transform: translateY(-4px);
}

.thumbnail {
    height: 200px;
    overflow: hidden;
}

.thumbnail .el-image {
    width: 100%;
    height: 100%;
}

.image-error {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f7fa;
}

.image-error .el-icon {
    font-size: 32px;
    color: #909399;
}

.card-content {
    padding: 16px;
}

.title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.description {
    margin: 0 0 12px;
    font-size: 14px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tags {
    margin-bottom: 12px;
}

.tags .el-tag {
    margin-right: 8px;
    margin-bottom: 8px;
}

.stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    color: #909399;
    font-size: 14px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.actions {
    display: flex;
    justify-content: center;
}

.actions .el-button {
    width: 100%;
}
</style> 